<template>
	<view class="content">
	  <view  class="area-part">
		  <view v-for="(item,index) in areaData" :key="index" :class="['area-content', index == value[0]?'click-community':'']" @click="clickStreet(index)">
		       <text>{{item.text}} </text>
		  </view>
	  </view>
     <view  class="area-part" style="background: white;" v-show="value[0] &&  areaData[value[0]].hasOwnProperty('child')">
     		  <view v-for="(item,index) in areaData[value[0]].child" :key="index" :class="['area-content',value.length == 2 && index == value[1]?'click-community':'']" @click="clickCommunity(index)">
     		       <text>{{item.text}} </text>
     		  </view>
     </view>

      <view  class="area-part" style="background: white;" v-show="value[0] &&  areaData[value[0]].hasOwnProperty('child')  &&  areaData[value[0]].child[value[1]] ">
     		  <view v-for="(item,index) in areaData[value[0]].child[value[1]].child" :key="index" :class="['area-content',value.length == 3 && index == value[2]?'click-community':'']" @click="clickTree(index)">
     		       <text>{{item.text}}</text>
     		  </view>
        </view>
	</view>
</template>

<script>
	
	export default {
		props: {
			areaData:{
				'type':Array,
				 default:[]
			},
			'value':{
				'type':Array,
				 default:[]
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			clickStreet(index){
				this.$set(this.$parent.nowIndex,'area',[index] )
			},	
			clickCommunity(index){
				this.$set(this.$parent.nowIndex,'area',[this.value[0],index] )
			},
			clickTree(index){
				this.$set(this.$parent.nowIndex,'area',[this.value[0],this.value[1],index] )
			}
		}
	}
</script>

<style scoped lang="less">
	.content{
		width: 100%;
		display: flex;
		background:#f5f5f5;
	}
	.area-part{
		flex: 1;
		max-height: 450rpx;
		overflow-y: auto;
		.area-content{
			// border: 1rpx solid blue;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100rpx;
			font-size: 30rpx;
		}
		.click-community{
			background: white;
			color: #2979ff;
		}
	}
</style>
